<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%@ taglib prefix="s" uri="/struts-tags"%>
<%@taglib prefix="pu" uri="/WEB-INF/tld/pageutil.tld" %>
<%@taglib prefix="mu" uri="/WEB-INF/tld/mallutil.tld" %>
<%@taglib uri="http://java.sun.com/jstl/core" prefix="c"%>
<%@taglib uri="http://java.sun.com/jstl/core_rt" prefix="c-rt"%>
<%@taglib uri="http://java.sun.com/jstl/fmt_rt" prefix="fmt-rt"%>
${pu:listAdd('paramsImageB', product.productId) }
${pu:listAdd('paramsImageB', 'IMGB') } 
${pu:listAdd('paramsImageB', 'N') }
${pu:reqSet('hqlIB', 'from Image where productId=? and type=? and isDelete=? order by showSeq asc,imgFilePath asc ') } 
${pu:reqSet('imagesB', pu:queryByHql(hqlIB, pu:arrayGet('paramsImageB'), null))}
<script>
var currentImageAt=0;
var desc = new Array();
var img = new Array();
var index = 0;
$(function(){
	<c-rt:forEach items="${imagesB}" var="imageB" varStatus="status">
		desc[index] = "${imageB.picDesc}";
		img[index] = "${imageB.imgFilePath}";
		index++;
	</c-rt:forEach>
	$('.pding-slist > a').each(function(i){
		$(this).mouseover(function(){
			$('.pding-slist > a').each(function(){
				$(this).removeClass('pdimg-f');
			});
			$(this).addClass('pdimg-f');
			$('.pdimg-big > img').eq(0).attr("src",img[i]);
			$("#pdimg-txt").text(desc[i]);
		});
	});
	$('.pdimg-btn-more').click(function(){
		$("#singleImg").hide();
		$("#allImg").show();
	});
	$('.pdimg-btn-close').click(function(){
		$("#singleImg").show();
		$("#allImg").hide();
	});
	$('.pdimg-btn-more').trigger('click');
});
</script>
<div class="tab-bg02">
          <p><a href="#productDescription">商品描述</a> 
          <c-rt:if test="${!empty imagesB}">| <a href="#productImage">其他图片</a> </c-rt:if>
          | <a href="#productSpec">规格参数</a></p>
        </div>
        <!-- 
        <div class="bbs">
          <div class="pimage"><img src="/images/pd/bbs.gif" alt="" width="600" height="180" /></div>
        </div>
        -->
        <a name="productDescription"></a>
        <c-rt:if test="${not empty mu:productDescription(product.productId) }">
        <div class="bbs-sub">
          <p>商品描述</p>
        </div>
        <div class="bbs-content">
        ${mu:productDescription(product.productId) }
        </div>
        <p align="right"><a href="#"><span class="a-top"></span>Top</a></p>
        </c-rt:if>
        <c-rt:if test="${!empty imagesB}">
        <a name="productImage"></a>
        <div class="bbs-sub">
          <p>其他图片</p>
        </div>
        <!-- 圖片展示區 -->
        <div class="showImage">
        <div id="singleImg" class="pdimg-show" style="clear:both;height:auto;overflow:visible;">
     			<p class="pdimg-txt" id="pdimg-txt">${imagesB[0].picDesc}</p>
          <div class="pdimg-big" >
          	<img src="${imagesB[0].imgFilePath}" alt=""/>
					</div>
          <div class="pding-slist">
          ${pu:listAdd('paramsImageS', product.productId) }
          ${pu:listAdd('paramsImageS', 'IMGS')}
          ${pu:listAdd('paramsImageS', 'N') }
          ${pu:reqSet('hqlIS', 'from Image where productId=? and type=? and isDelete=? order by showSeq asc,imgFilePath asc ')}
          ${pu:reqSet('imagesS', pu:queryByHql(hqlIS, pu:arrayGet('paramsImageS'), null))}
          <c-rt:forEach items="${imagesS }" var="imageS" varStatus="status">
         	 <a href="#${status.index }" <c-rt:if test="${status.index==0 }">class="pdimg-f"</c-rt:if>><img src="${imageS.imgFilePath }" alt="" width="50" height="50"/></a>
          </c-rt:forEach>
          </div>
          <c-rt:if test="${!empty imagesS}">
          <p><a href="javascript:;" class="pdimg-btn-more">展开全部</a></p>
          </c-rt:if>
        </div>
        <div id="allImg" style="display:none">
	        <c-rt:forEach items="${imagesB}" var="imageB" varStatus="status">
		        <div class="pdimg-show">
		        	<p class="pdimg-txt" >${imageB.picDesc}</p>
		        	<div class="pdimg-big" style="height:auto">
		        		<img src="${imageB.imgFilePath }" alt=""/>
		        	</div>
		        	<p><a href="javascript:;" class="pdimg-btn-close">收合全部</a></p>
						</div>
	        </c-rt:forEach>
        </div>
        </div>
        <!-- 圖片展示區 -->
        <p style="clear:both" align="right"><a href="#"><span class="a-top"></span>Top</a></p>
        </c-rt:if>
        <a name="productSpec"></a>
        <c-rt:if test="${not empty mu:productDetail(product.productId) }">
        <div class="bbs-sub">
          <p>规格参数</p>
        </div>
        <div class="bbs-content">
          ${mu:productDetail(product.productId) }
        </div>
        <p align="right"><a href="#"><span class="a-top"></span>Top</a></p>
        </c-rt:if>